<script setup>
    import { onMounted } from 'vue'
    import positionIcon1 from '../../../assets/images/party-icon.png'

    const props = defineProps({
        list: {
            type: Array,
            default: []
        }
    })

    // 定时器
    let timer = undefined

    // 创建Map实例
    let map = undefined

    // 徐庄坐标
    let xzPosition = [117.591789,35.0625482]

    onMounted(() => {
        map = new BMapGL.Map("party-branch-container");            // 创建Map实例  
        map.enableScrollWheelZoom();                           //启用滚轮放大缩小  
        
        var point = new BMapGL.Point(...xzPosition);    // 创建点坐标
        map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。
        map.setMapStyleV2({     
            styleId: '4d7aa5b0698d183a881a7842e830ddfb'
        })

        init()
    })

    let resData = $ref([])


    const init = () => {
        map.clearOverlays()

        resData = props.list

        let arr = []

        if(resData.length){
            arr = resData.map((item) => {
                if(!item.position) return []
                return [item.position.split(',')[0], item.position.split(',')[1]]
            })
        }
        // let arr = [[117.591789,35.0625482]]


        var myIcon = new BMapGL.Icon(positionIcon1, new BMapGL.Size(34, 55));
        
        for(let i = 0; i < arr.length; i++){
            // 创建Marker标注，使用图标
            if(!arr[i]) return 
            var pt = new BMapGL.Point(arr[i][0], arr[i][1]);
            var marker = new BMapGL.Marker(pt, {
                icon: myIcon
            });

            map.addOverlay(marker)

            marker.addEventListener('click', function (e) {
                e.domEvent.stopPropagation();
                e.domEvent.cancelBubble = true;
                dialogInfo = {
                    top: e.screenY,
                    left: e.screenX
                }
                dialogVisible = true
                details = resData[i]
            });

            // 鼠标放在坐标上 500ms 显示详情
            // marker.addEventListener('mouseover', function (e) {
            //     var p = e.target;
            //     clearTimeout(timer)
            //     timer = setTimeout(() => {
            //         dialogInfo = {
            //             top: e.screenY,
            //             left: e.screenX
            //         }
            //         dialogVisible = true
            //         details = resData[i]
            //     }, 500);
            // });

            // // 鼠标移开 关闭详情
            // marker.addEventListener('mouseout', function (e) {
            //     dialogVisible = false
            //     clearTimeout(timer)
            // });

        }
    }



    defineExpose({
        init
    })

    let dialogVisible = $ref(false)
    let details = $ref({})

    let dialogInfo = $ref({})

</script>

<template>
    <div class="party-branch-map-wrap" @click.prevent="dialogVisible=false">
        <div id="party-branch-container"></div>

        <div 
            v-if="dialogVisible"
            class="partyInfo"
            :style="{
                top: dialogInfo.top + 'px',
                left: dialogInfo.left + 'px'
            }"
        >
            <p>{{ details.name }}</p>
            <p>党员共<span>{{ details.partyCount }}</span>名</p>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .party-branch-map-wrap{
        width: 100%;
        height: 540px;
        // background: #fff;

        #party-branch-container{
            width: 100%;
            height: 100%;
        }

        .partyInfo{
            position: absolute;
            z-index: 99;
            min-width: 208px;
            padding: 20px 30px;
            background: rgba(0,0,0, 0.5);
            
            p{
                font-size: 20px;
                line-height: 36px;

                color: #fff;
                span{
                    color: #20FBF8;
                }
            }
        }
    }
</style>